大家好，我是一名菜鳥工程師，Chris，今天來到第八天，CSS 的佈局教學 - Grid 網格狀排列

Grid (網格狀排列): 是一種強大的佈局系統，用來建立複雜的網格，而且它在排版和設計方面非常靈活

Grid 的基本認識

1 網格容器 : 我們先來建立一個 CSS Grid 容器，可以使用任何一種 HTML 元素，並在這個容器上利用CSS屬性display: grid;

.container {
  display: grid;
}

2 定義網格列和行 : 在容器中，可以定義網格的行（rows）和列（columns）。使用grid-template-rows 和 grid-template-columns 屬性來定義它們的大小和數量

.container {
  display: grid;
  grid-template-rows: 100px 100px; /* 設定為兩行，每行高度分別為100px和100px */
  grid-template-columns: 100px 200px 300px; /* 設定為三列，每列寬度分別為100px、200px和300px */
}

3 放置內容到網格 : 再來，可以將內容放置到網格中。使用grid-row和grid-column屬性來指定元素，將放置到哪個行和列上

.item {
  grid-row: 1 / 2; /* 第一行到第二行 */
  grid-column: 2 / 4; /* 從第二列到第四列 */
}

4 自動調整網格大小 : Grid 可以自動調整網格的大小。使用fr（fractional unit）來設定彈性佈局

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 自動分配寬度，第二列佔用前兩列的寬度 */
}

5 重複的列和行 : 需要多個相同大小的行或列，使用repeat函數

.container {
  display: grid;
  grid-template-columns: repeat(4, 100px); /* 建立4個100px寬的列 */
}

6 網格間距 : 使用grid-gap或grid-row-gap和grid-column-gap來設定網格之間的間距

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px; /* 設定網格間距為20px */
}

Grid 的進階學習

1 命名網格 : 可以幫網格的行和列命名，這樣能夠將內容放置在指定的網格中。使用grid-template-areas和grid-area屬性，為子元素設定網格的名稱

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 200px;
  grid-template-areas:
    "one one one"
    "two three three";
}

.one {
  grid-area: one;
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}

2 自動填充和自動調整 : 使用grid-auto-rows和grid-auto-columns設定自動填充的行和列大小。可以使用minmax函數指定最小和最大的大小

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(100px, auto); /* 自動填充行的高度，最小100px */
  grid-gap: 20px;
}

3 不規則的網格 : 有時可能需要建立不規則形狀的網格，可以使用span來設定彈性項目，在網格中的橫跨度

.item {
  grid-row: span 3; /* 跨越三行 */
  grid-column: span 2; /* 跨越兩列 */
}

4 排序項目 : 使用order屬性調整彈性項目的顯示順序。在一般情況下，所有項目的order值為 0，可以指定正數或負數的order值，來改變它們的順序

.item1 {
  order: 1;
}

.item2 {
  order: -1;
}

5 嵌套網格 : 可以在CSS Grid容器中嵌套另一個CSS Grid容器，來建立更複雜的佈局

.outer-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

.inner-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

6 RWD : 使用媒體查詢（Media Queries）和@supports規則，可以根據不同的螢幕大小和設備條件，來調整網格的佈局和屬性

@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr; 
  }
}

預告：明天會講 RWD 響應式網頁以及動畫效果!!!